#flowerimg {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 5px;
    left: 10px;
    animation-name: flower;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index:40;
}

@keyframes flower {
    0% {
        width: 150px;
        height: 150px;
        opacity: 0;
        -webkit-transform: translate(0, 0vh) rotateZ(0deg);
    }
    25% {
        width: 150px;
        height: 150px;
        opacity: 0.5;
        -webkit-transform: translate(0, 25vh) rotateZ(90deg);
    }
    75% {
        width: 150px;
        height: 150px;
        opacity: 0.8;
        -webkit-transform: translate(5vw, 75vh) rotateZ(270deg);
    }
    100% {
        width: 150px;
        height: 150px;
        opacity: 0;
        -webkit-transform: translate(10vw, 100vh) rotateZ(360deg);
    }
}

@-webkit-keyframes flower {
    0% {
        width: 150px;
        height: 150px;
        opacity: 0;
        -webkit-transform: translate(0, 0vh) rotateZ(0deg);
    }
    25% {
        width: 150px;
        height: 150px;
        opacity: 0.5;
        -webkit-transform: translate(0, 25vh) rotateZ(90deg);
    }
    75% {
        width: 150px;
        height: 150px;
        opacity: 0.8;
        -webkit-transform: translate(5vw, 75vh) rotateZ(270deg);
    }
    100% {
        width: 150px;
        height: 150px;
        opacity: 0;
        -webkit-transform: translate(10vw, 100vh) rotateZ(360deg);
    }
}

@-moz-keyframes flower {
    0% {
        width: 150px;
        height: 150px;
        opacity: 0;
        -webkit-transform: translate(0, 0vh) rotateZ(0deg);
    }
    25% {
        width: 150px;
        height: 150px;
        opacity: 0.8;
        -webkit-transform: translate(0, 25vh) rotateZ(90deg);
    }
    75% {
        width: 150px;
        height: 150px;
        opacity: 0.5;
        -webkit-transform: translate(5vw, 75vh) rotateZ(270deg);
    }
    100% {
        width: 150px;
        height: 150px;
        opacity: 0;
        -webkit-transform: translate(10vw, 100vh) rotateZ(360deg);
    }
}

/* Media Queries for responsiveness */

/* Small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    #flowerimg {
        width: 100px;
        height: 100px;
        top: -150px;
        left: 5px;
    }
}

/* Small to Medium devices (portrait tablets and large phones, 600px to 820px) */
@media only screen and (max-width: 820px) {
    #flowerimg {
        width: 120px;
        height: 120px;
        top: -200px;
        left: 7px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    #flowerimg {
        width: 130px;
        height: 130px;
        top: -225px;
        left: 8px;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    #flowerimg {
        width: 150px;
        height: 150px;
        top: -250px;
        left: 10px;
    }
}